<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">

        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <td>时间</td>
                    <td>温度</td>
                    <td>天气</td>
                    <td>风向</td>
                    <td>风力</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            
        </table>
    </div>
    
    <script src="./jsonp.js"></script>
    <script>
        jsonp({
            url: "https://wis.qq.com/weather/common",
            data: {
                source: "pc",
                weather_type: "forecast_24h",
                province: "湖北省",
                city: "武汉市"
            },
            success: function(data){
                console.log(data);

                // 有两种方式获取控制台data数据里面的forecast_24h数据
                // 方式1
                // var data = data.data.forecast_24h;
                // console.log(data);

                // 方式2
                // fdata是一个对象
                var {data: {forecast_24h: fdata}} = data;
                console.log(fdata);


                var tbody = document.querySelector("tbody");


                tbody.innerHTML = "";
                // Object.values()返回一个数组
                Object.values(fdata).forEach(item => {
                    var tr = `<td>${item.time}</td>
                              <td>${item.max_degree}</td>
                              <td>${item.day_weather}</td>
                              <td>${item.day_wind_power}</td>
                              <td>${item.day_wind_direction}</td>`;


                    // insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。
                    tbody.insertAdjacentHTML("beforeend",tr);
                    
                });
            }

        })
    </script>
</body>
</html>